<template>
  <ul class="signal-box">
    <li :class="{fill: value > 0}" style="height: 4px"></li>
    <li :class="{fill: value > 1}" style="height: 6px"></li>
    <li :class="{fill: value > 2}" style="height: 8px"></li>
    <li :class="{fill: value > 3}" style="height: 10px"></li>
    <li :class="{fill: value > 4}" style="height: 12px"></li>
  </ul>
</template>

<script>
export default {
  props: ['value']
}
</script>

<style lang="less" scoped>
.signal-box {
  display: flex; align-items: flex-end;
  li {
    width: 3px;
    margin-right: 1px;
    background: #ccc;
    &.fill {
      background: #0a0;
    }
  }
}
</style>
